<template>
  <div class="all" p-5>
    <div class="all-top">
      <div class="all-top-tittle">案件处理</div>
    </div>
    <a-tabs class="all-tabs" v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="案件信息">
        <div class="archive">
          <div class="archive-steps" v-if="route.query.status != '1' && route.query.status != '5'">
            <a-steps :current="caseStatus(penaltyData?.status)" :items="steps"></a-steps>
          </div>
          <div class="archive-body">
            <div class="archive-body-left">
              <div class="taskBox" v-if="penaltyData?.taskId && penaltyData?.resultFileUrl">
                <div class="taskBox-top" style="padding: 10px 12px">
                  <div>任务信息</div>
                  <a-button type="primary" ghost @click="goTask" v-if="penaltyData?.taskId"
                    >查看任务</a-button
                  >
                </div>
                <div class="taskBox-bottom">
                  <BookCreate
                    :type="17"
                    :url="penaltyData?.resultFileUrl"
                    :newFileUrl="penaltyData?.resultFileUrl"
                    @getBookUrl="getBookUrl"
                  />
                </div>
              </div>
              <!-- 立案审批表 -->
              <div class="taskBox" v-if="lafileInfoData">
                <div class="taskBox-top">
                  <div>立案审批表</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="13"
                      :caseId="route.query.id"
                      :url="lafileInfoData.oldFileUrl"
                      :newFileUrl="lafileInfoData.newFileUrl"
                      :caseFileId="lafileInfoData.id"
                      :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                    />
                  </a-row>
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>调查取证</div>
                  <a-upload
                    :action="`${actionUrl}/manage/upload/uploadFile/5`"
                    accept="image/*"
                    :maxCount="1"
                    :headers="uploadHeader"
                    :showUploadList="false"
                    @change="handleUpload5"
                    :before-upload="beforeUpload2"
                    v-if="penaltyData?.status == 2 && penaltyData?.approveFlag == ''"
                  >
                    <a-button type="primary" ghost>上传</a-button>
                  </a-upload>
                </div>
                <div class="taskBox-bottom">
                  <!-- 调查取证通知书 -->
                  <a-row>
                    <BookCreate
                      :type="7"
                      :caseId="route.query.id"
                      :url="dcfileInfoData.oldFileUrl"
                      :newFileUrl="dcfileInfoData.newFileUrl"
                      :caseFileId="dcfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <!-- 权力义务告知书 -->
                  <a-row>
                    <BookCreate
                      :type="14"
                      :caseId="route.query.id"
                      :url="qlfileInfoData.oldFileUrl"
                      :newFileUrl="qlfileInfoData.newFileUrl"
                      :caseFileId="qlfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>

                  <!-- 先行登记保存决定书 -->
                  <a-row>
                    <BookCreate
                      :type="24"
                      :caseId="route.query.id"
                      :url="xxdjfileInfoData.oldFileUrl"
                      :newFileUrl="xxdjfileInfoData.newFileUrl"
                      :caseFileId="xxdjfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <!-- 调查取证其他文书 -->
                  <div v-if="dcqzfileInfoDataList != ''">
                    <a-row v-for="(item, index) in dcqzfileInfoDataList as any">
                      <BookCreate
                        :type="15"
                        :caseId="route.query.id"
                        :url="item.oldFileUrl"
                        :fileName="item.fileName"
                        :newFileUrl="item.newFileUrl"
                        :caseFileId="item.id"
                        :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                        @getBookUrl="getBookUrl"
                        v-if="index > 2"
                    /></a-row>
                  </div>
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>询问笔录</div>
                  <a-upload
                    :action="`${actionUrl}/manage/upload/uploadFile/5`"
                    accept="image/*"
                    :maxCount="1"
                    :headers="uploadHeader"
                    :showUploadList="false"
                    @change="handleUpload"
                    :before-upload="beforeUpload2"
                    v-if="penaltyData?.status == 2 && penaltyData?.approveFlag == ''"
                  >
                    <a-button type="primary" ghost>上传</a-button>
                  </a-upload>
                </div>
                <div class="taskBox-bottom">
                  <!-- 询问通知书 -->
                  <a-row>
                    <BookCreate
                      :type="12"
                      :caseId="route.query.id"
                      :url="cwfileInfoData.oldFileUrl"
                      :newFileUrl="cwfileInfoData.newFileUrl"
                      :caseFileId="cwfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <!-- 询问笔录 -->
                  <a-row>
                    <BookCreate
                      :type="15"
                      :caseId="route.query.id"
                      :url="xwfileInfoData.oldFileUrl"
                      :newFileUrl="xwfileInfoData.newFileUrl"
                      :caseFileId="xwfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <div v-if="xwfileInfoDataList != ''">
                    <a-row v-for="(item, index) in xwfileInfoDataList as any">
                      <BookCreate
                        :type="15"
                        :caseId="route.query.id"
                        :url="item.oldFileUrl"
                        :fileName="item.fileName"
                        :newFileUrl="item.newFileUrl"
                        :caseFileId="item.id"
                        :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                        @getBookUrl="getBookUrl"
                        v-if="index > 1"
                    /></a-row>
                  </div>
                  <!-- <div class="noData" v-else>暂未上传</div> -->
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>法制审核</div>
                </div>
                <div class="taskBox-bottom">
                  <!-- 法制审核意见 -->
                  <a-row>
                    <BookCreate
                      :type="25"
                      :caseId="route.query.id"
                      :url="fzshfileInfoData.oldFileUrl"
                      :newFileUrl="fzshfileInfoData.newFileUrl"
                      :caseFileId="fzshfileInfoData.id"
                      :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>集体议案</div>
                  <a-upload
                    :action="`${actionUrl}/manage/upload/uploadFile/5`"
                    accept="image/*,.pdf,.docx"
                    :maxCount="1"
                    :headers="uploadHeader"
                    :showUploadList="false"
                    @change="handleUpload2"
                    :before-upload="beforeUpload2"
                    v-if="penaltyData?.status < 3 && penaltyData?.approveFlag == ''"
                  >
                    <a-button type="primary" ghost>上传</a-button>
                  </a-upload>
                </div>
                <div class="taskBox-bottom" v-if="jtyafileInfoDataList != ''">
                  <a-row v-for="item in jtyafileInfoDataList as any">
                    <BookCreate
                      :type="19"
                      :caseId="route.query.id"
                      :url="item.oldFileUrl"
                      :fileName="item.fileName"
                      :newFileUrl="item.newFileUrl"
                      :caseFileId="item.id"
                      :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
                <div class="taskBox-bottom" v-else>
                  <div class="noData">暂未上传</div>
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>其他</div>
                  <a-upload
                    :action="`${actionUrl}/manage/upload/uploadFile/5`"
                    accept="image/*,.pdf,.docx"
                    :maxCount="1"
                    :headers="uploadHeader"
                    :showUploadList="false"
                    @change="handleUpload3"
                    :before-upload="beforeUpload2"
                    v-if="penaltyData?.status < 3 && penaltyData?.approveFlag == ''"
                  >
                    <a-button type="primary" ghost>上传</a-button>
                  </a-upload>
                </div>
                <div class="taskBox-bottom" v-if="otherInfoData != ''">
                  <a-row v-for="item in otherInfoData as any">
                    <BookCreate
                      :type="19"
                      :caseId="route.query.id"
                      :url="item.oldFileUrl"
                      :fileName="item.fileName"
                      :newFileUrl="item.newFileUrl"
                      :caseFileId="item.id"
                      :isShow="caseShow(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
                <div class="taskBox-bottom" v-else>
                  <div class="noData">暂未上传</div>
                </div>
              </div>
              <div
                class="taskBox"
                v-if="penaltyData?.status >= 3 && xzcffileInfoData.fileType != ''"
              >
                <div class="taskBox-top">
                  <div>处罚告知</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="11"
                      :caseId="route.query.id"
                      :url="xzfileInfoData.oldFileUrl"
                      :newFileUrl="xzfileInfoData.newFileUrl"
                      :caseFileId="xzfileInfoData.id"
                      :isShow="caseShow3(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <div
                class="taskBox"
                v-if="
                  penaltyData?.status >= 3 &&
                  (xzcffileInfoData.fileType != '' || byxzcffileInfoData.fileType != '')
                "
              >
                <div class="taskBox-top">
                  <div>处罚文书</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row v-if="penaltyData?.handleWay == 2">
                    <BookCreate
                      :type="1"
                      :caseId="route.query.id"
                      :url="xzcffileInfoData.oldFileUrl"
                      :newFileUrl="xzcffileInfoData.newFileUrl"
                      :caseFileId="xzcffileInfoData.id"
                      :isShow="caseShow3(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                    />
                    <BookCreate
                      :type="29"
                      :caseId="route.query.id"
                      :url="xzcfspileInfoData.oldFileUrl"
                      :newFileUrl="xzcfspileInfoData.newFileUrl"
                      :caseFileId="xzcfspileInfoData.id"
                      :isShow="caseShow3(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                    />
                  </a-row>
                  <a-row v-if="penaltyData?.handleWay == 1">
                    <BookCreate
                      :type="27"
                      :caseId="route.query.id"
                      :url="byxzcffileInfoData.oldFileUrl"
                      :newFileUrl="byxzcffileInfoData.newFileUrl"
                      :caseFileId="byxzcffileInfoData.id"
                      :isShow="caseShow3(penaltyData?.status, penaltyData?.approveFlag)"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <div
                class="taskBox"
                v-if="
                  penaltyData?.status >= 4 &&
                  yqfqfileInfoData.fileType != '' &&
                  (formState.delayFlag === 1 || penaltyData?.delayFlag === 1)
                "
              >
                <div class="taskBox-top">
                  <div>延期/分期文书</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="26"
                      :caseId="route.query.id"
                      :url="yqfqfileInfoData.oldFileUrl"
                      :newFileUrl="yqfqfileInfoData.newFileUrl"
                      :caseFileId="yqfqfileInfoData.id"
                      :isShow="caseShow4(penaltyData?.status, penaltyData?.delayFlag)"
                      @getBookUrl="getBookUrl"
                    />
                    <BookCreate
                      :type="30"
                      :caseId="route.query.id"
                      :url="yqfqspfileInfoData.oldFileUrl"
                      :newFileUrl="yqfqspfileInfoData.newFileUrl"
                      :caseFileId="yqfqspfileInfoData.id"
                      :isShow="caseShow4(penaltyData?.status, penaltyData?.delayFlag)"
                      @getBookUrl="getBookUrl"
                    />
                  </a-row>
                </div>
              </div>
              <div
                class="taskBox"
                v-if="
                  (penaltyData?.status >= 4 &&
                    sdhzfileInfoData.fileType != '' &&
                    jnpzfileInfoData.fileType != '' &&
                    (formState?.delayFlag == 0 || penaltyData?.delayFlag == 1) &&
                    penaltyData?.handleWay == 2) ||
                  (penaltyData?.status >= 4 &&
                    sdhzfileInfoData.fileType != '' &&
                    penaltyData?.delayFlag == 0 &&
                    penaltyData?.handleWay == 1) ||
                  (penaltyData?.status == 3 &&
                    penaltyData?.handleWay == 1 &&
                    sdhzfileInfoData?.fileType != '')
                "
              >
                <div class="taskBox-top">
                  <div>归档文书</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="16"
                      :caseId="route.query.id"
                      :url="sdhzfileInfoData.oldFileUrl"
                      :newFileUrl="sdhzfileInfoData.newFileUrl"
                      :caseFileId="sdhzfileInfoData.id"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <a-row
                    v-if="
                      (penaltyData?.handleWay == 2 &&
                        penaltyData?.agreeDelayFlag !== '' &&
                        penaltyData?.delayFlag == 1) ||
                      (penaltyData?.handleWay == 2 && formState?.delayFlag == 0)
                    "
                  >
                    <BookCreate
                      :type="22"
                      :caseId="route.query.id"
                      :url="jnpzfileInfoData.oldFileUrl"
                      :newFileUrl="jnpzfileInfoData.newFileUrl"
                      :caseFileId="jnpzfileInfoData.id"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <!-- <div class="taskBox" v-if="endFlag">
                <div class="taskBox-top">
                  <div>终止案件集体议案</div>
                  <a-upload
                    :action="`${actionUrl}/manage/upload/uploadFile/5`"
                    accept="image/*,.pdf,.docx"
                    :maxCount="1"
                    :headers="uploadHeader"
                    :showUploadList="false"
                    @change="handleUpload4"
                    :before-upload="beforeUpload2"
                  >
                    <a-button type="primary" ghost>上传</a-button>
                  </a-upload>
                </div>
                <div class="taskBox-bottom" v-if="zzajjtInfoDataList != ''">
                  <a-row v-for="item in zzajjtInfoDataList as any">
                    <BookCreate
                      :type="19"
                      :caseId="route.query.id"
                      :url="item.oldFileUrl"
                      :fileName="item.fileName"
                      :newFileUrl="item.newFileUrl"
                      :caseFileId="item.id"
                      :isShow="true"
                      @getBookUrl="getBookUrl2"
                  /></a-row>
                </div>
                <div class="taskBox-bottom" v-else>
                  <div class="noData">暂未上传</div>
                </div>
              </div> -->
              <div class="taskBox" v-if="zzajjtInfoDataList != '' && penaltyData?.status == 5">
                <div class="taskBox-top">
                  <div>终止案件集体议案</div>
                </div>
                <div class="taskBox-bottom" v-if="zzajjtInfoDataList != ''">
                  <a-row v-for="item in zzajjtInfoDataList as any">
                    <BookCreate
                      :type="19"
                      :caseId="route.query.id"
                      :url="item.oldFileUrl"
                      :fileName="item.fileName"
                      :newFileUrl="item.newFileUrl"
                      :caseFileId="item.id"
                      :isShow="false"
                      @getBookUrl="getBookUrl2"
                  /></a-row>
                </div>
                <div class="taskBox-bottom" v-else>
                  <div class="noData">暂未上传</div>
                </div>
              </div>
              <div class="taskBox" v-if="penaltyData?.cancelFlag == 1">
                <div class="taskBox-top">
                  <div>终止文书</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="28"
                      :caseId="route.query.id"
                      :url="zzajdcfileInfoData.oldFileUrl"
                      :newFileUrl="zzajdcfileInfoData.newFileUrl"
                      :caseFileId="zzajdcfileInfoData.id"
                      @getBookUrl="getBookUrl"
                    />
                    <BookCreate
                      :type="31"
                      :caseId="route.query.id"
                      :url="zzajspfileInfoData.oldFileUrl"
                      :newFileUrl="zzajspfileInfoData.newFileUrl"
                      :caseFileId="zzajspfileInfoData.id"
                      @getBookUrl="getBookUrl"
                    />
                  </a-row>
                </div>
              </div>
            </div>
            <div class="archive-body-right" :style="changeWith(route.query.status)">
              <PenaltyInfo :id="route.query.id" :title="false" :useType="2"></PenaltyInfo>
              <a-form
                ref="formRef"
                :model="formState"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
              >
                <div
                  class="penaltyInfo-body-box"
                  v-if="
                    penaltyData?.status == 2 &&
                    (penaltyData?.draftFlag == '' || penaltyData?.draftFlag == 1) &&
                    penaltyData?.approveFlag == ''
                  "
                >
                  <div class="penaltyInfo-body-box-tittle">
                    <div class="penaltyInfo-body-box-tittle-left"></div>
                    <div class="penaltyInfo-body-box-tittle-right">处理方式</div>
                  </div>
                  <div class="penaltyInfo-body-box-info">
                    <a-row :gutter="24">
                      <a-col class="gutter-row" :span="8">
                        <a-form-item
                          label="处理方式"
                          name="handleWay"
                          v-if="penaltyData?.status == 2 && penaltyData?.approveFlag == ''"
                        >
                          <a-select
                            v-model:value="formState.handleWay"
                            placeholder="请选择处理方式"
                          >
                            <a-select-option :value="1">不予处罚</a-select-option>
                            <a-select-option :value="2">行政处罚</a-select-option>
                          </a-select>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div>
                  <a-col
                    class="gutter-row"
                    :span="7"
                    v-if="penaltyData?.status == 3 && penaltyData?.handleWay == 2"
                  >
                    <a-form-item label="罚款金额" name="penaltyAmount">
                      <a-input
                        v-model:value="formState.penaltyAmount"
                        :controls="false"
                        addon-after="元"
                        :maxlength="8"
                        autocomplete="off"
                        onkeyup="value=value.match(/\d+\.?\d{0,2}/,'')"
                        placeholder="请输入罚款金额"
                      />
                    </a-form-item>
                    <!-- :max="penaltyData?.placeInfo.partyType == 0 ? 200 : 3000" -->
                  </a-col>
                </div>
                <div>
                  <a-col class="gutter-row" :span="8">
                    <a-form-item
                      label="是否延期/分期"
                      name="delayFlag"
                      :labelCol="{ style: { width: '115px' } }"
                      v-if="
                        penaltyData?.status == 4 &&
                        penaltyData?.handleWay == 2 &&
                        penaltyData?.delayFlag === ''
                      "
                    >
                      <a-select v-model:value="formState.delayFlag" placeholder="请选择">
                        <a-select-option :value="1">是</a-select-option>
                        <a-select-option :value="0">否</a-select-option>
                      </a-select>
                    </a-form-item>
                    <a-form-item
                      label="延期/分期原因"
                      :labelCol="{ style: { width: '115px' } }"
                      name="delayReason"
                      v-if="
                        penaltyData?.status == 4 &&
                        penaltyData?.handleWay == 2 &&
                        formState.delayFlag == 1 &&
                        penaltyData?.delayFlag === ''
                      "
                    >
                      <a-textarea
                        v-model:value="formState.delayReason"
                        placeholder="延期/分期原因"
                        :rows="4"
                      />
                    </a-form-item>
                  </a-col>
                </div>
                <!-- <div
                  class="penaltyInfo-body-box"
                  v-if="penaltyData?.status >= 2 && showFlag == false"
                >
                  <div class="penaltyInfo-body-box-tittle">
                    <div class="penaltyInfo-body-box-tittle-left"></div>
                    <div class="penaltyInfo-body-box-tittle-right">案件终止原因</div>
                  </div>
                  <div class="penaltyInfo-body-box-info">
                    <a-row :gutter="24">
                      <a-col class="gutter-row" :span="8">
                        <a-form-item
                          label="案件终止原因"
                          :labelCol="{ span: 8 }"
                          name="cancelReason"
                          v-if="showFlag == false"
                        >
                          <a-textarea
                            v-model:value="formState.cancelReason"
                            placeholder="请填写案件终止原因"
                            :rows="4"
                          />
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </div>
                </div> -->
              </a-form>
            </div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="立案审批记录" force-render>
        <DynamicTable
          :columns="columns"
          :data-request="loadData"
          bordered
          :search="false"
          :showToolBar="false"
          :pagination="false"
        />
      </a-tab-pane>
      <a-tab-pane key="3" tab="案件处理审批记录" v-if="handleList != ''">
        <DynamicTable
          :columns="columns"
          :data-request="loadData2"
          bordered
          :search="false"
          :showToolBar="false"
          :pagination="false"
      /></a-tab-pane>
      <a-tab-pane key="4" tab="延期/分期审批记录" v-if="delayList.length != 0">
        <DynamicTable
          :columns="columns"
          :data-request="loadData3"
          bordered
          :search="false"
          :showToolBar="false"
          :pagination="false"
      /></a-tab-pane>
      <a-tab-pane key="5" tab="案件终止审批记录" v-if="cancelList.length != 0">
        <DynamicTable
          :columns="columns"
          :data-request="loadData4"
          bordered
          :search="false"
          :showToolBar="false"
          :pagination="false"
      /></a-tab-pane>
    </a-tabs>
    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-space :size="12">
        <a-button size="large" @click="cacel">取消</a-button>
        <!-- <a-button
          size="large"
          type="primary"
          v-if="
            (penaltyData?.status == 2 &&
              ((penaltyData.handleWay == '' && penaltyData?.draftFlag == 0) ||
                (penaltyData.handleWay != '' && penaltyData?.draftFlag == 1))) ||
            (penaltyData?.status == 3 &&
              ((penaltyData.penaltyAmount == '' &&
                penaltyData?.draftFlag == 0 &&
                byxzcffileInfoData.fileType == '') ||
                (penaltyData.penaltyAmount != '' && penaltyData?.draftFlag == 1))) ||
            (penaltyData?.status == 4 &&
              ((penaltyData.agreeDelayFlag === '' &&
                penaltyData?.draftFlag == 0 &&
                (sdhzfileInfoData?.fileType == '' || penaltyData.approveFlag == 2)) ||
                (penaltyData.agreeDelayFlag !== '' && penaltyData?.draftFlag == 1)))
          "
          @click="onSubmit(1)"
          >暂存</a-button
        > -->
        <a-button
          size="large"
          type="primary"
          v-if="penaltyData?.status >= 3 && showFlag == true"
          @click="onSubmit(0)"
          >提交</a-button
        >
        <a-button
          size="large"
          type="primary"
          v-if="penaltyData?.status == 2 && showFlag == true"
          @click="onSubmit(2)"
          >提交</a-button
        >
        <a-button
          size="large"
          type="primary"
          @click="onEnd"
          danger
          v-if="showFlag == true && penaltyData?.cancelFlag != 1"
          >申请终止</a-button
        >
        <!-- <a-button size="large" type="primary" @click="onEnd2" v-if="showFlag == false"
          >提交审批</a-button
        > -->
      </a-space>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import PenaltyInfo from '../../components/penaltyInfo.vue';
  const activeKey = ref('1');
  import router from '@/router';
  import { createVNode } from 'vue';
  import { useRoute } from 'vue-router';
  import {
    applyCancelCase,
    caseDetail,
    deleteCancelFile,
    handleCase,
  } from '@/api/administrativePenalty/case-management';
  import { message, Modal, Upload } from 'ant-design-vue';
  import { ACCESS_TOKEN_KEY } from '@/enums/cacheEnum';

  import { useTable } from '@/components/core/dynamic-table';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { uploadCaseFile } from '@/api/account';
  import { Storage } from '@/utils/Storage';
  import type { Rule } from 'ant-design-vue/es/form';

  const tabsViewStore = useTabsViewStore();

  const [DynamicTable, dynamicTableInstance] = useTable();
  const route = useRoute();

  const goTask = () => {
    router.push({
      path: '/supervision/task-view',
      query: { id: penaltyData.value.taskId },
    });
  };

  const caseData = ref();

  //立案审批表
  const lafileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //调查取证通知书
  const dcfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //询问通知书
  const cwfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //权力义务告知书
  const qlfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //先行登记保存决定书
  const xxdjfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //询问笔录列表
  const dcqzfileInfoDataList = ref([] as any);

  //询问笔录列表
  const xwfileInfoDataList = ref([] as any);

  //询问笔录
  const xwfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //其他
  const otherInfoData = ref([] as any);

  //行政处罚告知笔录
  const xzfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //行政处罚决定书
  const xzcffileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //行政处罚审批表
  const xzcfspileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //不予行政处罚决定书
  const byxzcffileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //行政处罚延期/分期缴纳罚款决定书
  const yqfqfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //行政处罚延期/分期缴纳罚款审批表
  const yqfqspfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //送达回证
  const sdhzfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //

  //缴纳凭证
  const jnpzfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //法制审核意见
  const fzshfileInfoData = ref({
    oldFileUrl: '123',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //终止案件调查决定书
  const zzajdcfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //终止案件调查审批表
  const zzajspfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
    fileType: '',
  });

  //集体议案
  const jtyafileInfoDataList = ref([] as any);

  //终止案件集体议案书
  const zzajjtInfoDataList = ref([] as any);

  //上传
  const actionUrl = ref(import.meta.env.VITE_BASE_API);
  const uploadHeader = {
    'API-User-Token': Storage.get(ACCESS_TOKEN_KEY),
  };
  const handleUpload = (info) => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name}上传成功`);
      let params = {
        caseId: route.query.id,
        fileType: '8', //文件类型 1、立案审批表； 2、调查取证通知书； 3、权力义务告知书；4、先行登记保存决定书； 5、调查取证其他文书；  6、询问通知书；7、询问笔录；8、询问笔录其他文书；9、集体议案相关文书； 10、法制审核意见；11、其他相关文书；12、行政处罚告知笔录；13、行政处罚决定书； 14、不予行政处罚决定书；15、行政处罚延期/分期缴纳罚款决定书；16、送达回证；  17、缴纳凭证；18、终止案件集体议案相关文书；19、终止案件调查决定书；20、当场处罚决定书；
        newFileUrl: info.file.response.data.fileIds[0],
        fileName: info.file.name,
      };
      uploadCaseFile(params).then((res) => {
        if (res.code == 0) {
          getBookUrl(res);
        }
      });
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name}上传失败`);
    }
  };
  const handleUpload2 = (info) => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name}上传成功`);
      let params = {
        caseId: route.query.id,
        fileType: '9',
        newFileUrl: info.file.response.data.fileIds[0],
        fileName: info.file.name,
      };
      uploadCaseFile(params).then((res) => {
        if (res.code == 0) {
          getBookUrl(res);
        }
      });
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name}上传失败`);
    }
  };

  const handleUpload3 = (info) => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name}上传成功`);
      let params = {
        caseId: route.query.id,
        fileType: '11',
        newFileUrl: info.file.response.data.fileIds[0],
        fileName: info.file.name,
      };
      uploadCaseFile(params).then((res) => {
        if (res.code == 0) {
          getBookUrl(res);
        }
      });
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name}上传失败`);
    }
  };

  const handleUpload4 = (info) => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name}上传成功`);
      let params = {
        caseId: route.query.id,
        fileType: '18',
        newFileUrl: info.file.response.data.fileIds[0],
        fileName: info.file.name,
      };
      uploadCaseFile(params).then((res) => {
        if (res.code == 0) {
          getBookUrl2(res);
        }
      });
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name}上传失败`);
    }
  };

  const handleUpload5 = (info) => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name}上传成功`);
      let params = {
        caseId: route.query.id,
        fileType: '5',
        newFileUrl: info.file.response.data.fileIds[0],
        fileName: info.file.name,
      };
      uploadCaseFile(params).then((res) => {
        if (res.code == 0) {
          getBookUrl(res);
        }
      });
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name}上传失败`);
    }
  };

  const beforeUpload = (file, fileList) => {
    const regex = /^image\/.+/;
    const isPDF = regex.test(file.type);
    if (!isPDF) {
      message.error(`只支持上传图片类型`);
    }
    return isPDF || Upload.LIST_IGNORE;
  };

  const beforeUpload2 = (file, fileList) => {
    const regexImg = /^image\/.+/;
    const regexPdf = /^application\/pdf/;
    const regexDoc = /^application\/vnd.openxmlformats-officedocument.wordprocessingml.document/;
    const isImg = regexImg.test(file.type);
    const isPdf = regexPdf.test(file.type);
    const isDoc = regexDoc.test(file.type);

    if (!(isImg || isPdf || isDoc)) {
      message.error(`只支持上传图片/pdf/docx类型`);
    }
    return isImg || isPdf || isDoc;
  };

  const caseDetailApi = async (val) => {
    const data = await caseDetail(route.query.id as any, val);
    penaltyData.value = data;
    if (penaltyData.value?.handleWay != '') {
      formState.handleWay = penaltyData.value?.handleWay;
    }

    if (penaltyData.value?.penaltyAmount != '') {
      formState.penaltyAmount = penaltyData.value?.penaltyAmount;
    }

    if (penaltyData.value.registerList) {
      registerList.value = penaltyData.value.registerList;
    }
    if (penaltyData.value.handleList) {
      handleList.value = penaltyData.value.handleList;
    }

    if (penaltyData.value.delayList) {
      delayList.value = penaltyData.value.delayList;
    }
    if (penaltyData.value.cancelList) {
      cancelList.value = penaltyData.value.cancelList;
    }

    if (penaltyData.value.stageList.length) {
      penaltyData.value.stageList.map((item) => {
        if (item.stageName == '立案审批表') {
          //立案审批表
          if (item.fileInfoList.length) {
            lafileInfoData.value = item.fileInfoList[0];
          }
        }
        if (item.stageName == '调查取证') {
          dcqzfileInfoDataList.value = item.fileInfoList;
          if (item.fileInfoList.length) {
            item.fileInfoList.map((i) => {
              if (i.fileType == 3) {
                //权力义务告知书
                qlfileInfoData.value = i;
              } else if (i.fileType == 2) {
                //调查取证通知书
                dcfileInfoData.value = i;
              } else if (i.fileType == 4) {
                //先行登记保存决定书
                xxdjfileInfoData.value = i;
              }
            });
          }
        }
        if (item.stageName == '询问笔录') {
          xwfileInfoDataList.value = item.fileInfoList;
          if (item.fileInfoList.length) {
            item.fileInfoList.map((i) => {
              if (i.fileType == 6) {
                //询问通知书
                cwfileInfoData.value = i;
              } else if (i.fileType == 7) {
                //询问笔录
                xwfileInfoData.value = i;
              }
            });
          }
        }
        if (item.stageName == '法制审核') {
          //法制审核意见
          if (item.fileInfoList.length) {
            fzshfileInfoData.value = item.fileInfoList[0];
          }
        }
        if (item.stageName == '集体议案') {
          jtyafileInfoDataList.value = item.fileInfoList;
        }
        if (item.stageName == '其他') {
          otherInfoData.value = item.fileInfoList;
        }
        if (item.stageName == '处罚告知') {
          if (item.fileInfoList.length) {
            xzfileInfoData.value = item.fileInfoList[0];
          }
        }
        if (item.stageName == '处罚文书') {
          if (item.fileInfoList.length) {
            item.fileInfoList.map((i) => {
              if (i.fileType == 13) {
                //行政处罚决定书
                xzcffileInfoData.value = i;
              } else if (i.fileType == 131) {
                //行政处罚审批表
                xzcfspileInfoData.value = i;
              } else if (i.fileType == 14) {
                //不予行政处罚决定书
                byxzcffileInfoData.value = i;
              }
            });
          }
        }
        if (item.stageName == '延期/分期文书') {
          if (item.fileInfoList.length) {
            item.fileInfoList.map((i) => {
              if (i.fileType == 15) {
                //行政处罚延期/分期缴纳罚款决定书
                yqfqfileInfoData.value = i;
              } else if (i.fileType == 151) {
                //行政处罚延期/分期缴纳罚款审批表
                yqfqspfileInfoData.value = i;
              }
            });
          }
        }
        if (item.stageName == '归档文书') {
          item.fileInfoList.map((i) => {
            if (i.fileType == 16) {
              //送达回证
              sdhzfileInfoData.value = i;
            } else if (i.fileType == 17) {
              //缴纳凭证
              jnpzfileInfoData.value = i;
            }
          });
        }
        if (item.stageName == '终止案件集体议案') {
          zzajjtInfoDataList.value = item.fileInfoList;
        }
        if (item.stageName == '终止文书') {
          if (item.fileInfoList.length) {
            item.fileInfoList.map((i) => {
              if (i.fileType == 19) {
                //终止案件调查决定书
                zzajdcfileInfoData.value = i;
              } else if (i.fileType == 191) {
                //终止案件调查审批表
                zzajspfileInfoData.value = i;
              }
            });
          }
        }
      });
    }
  };

  const getBookUrl = (data) => {
    if (data.code == 0) {
      caseDetailApi(2);
    }
  };

  const getBookUrl2 = (data) => {
    if (data.code == 0) {
      caseDetailApi(4);
    }
  };

  const cacel = async () => {
    if (zzajjtInfoDataList.value.length || zzajjtInfoDataList.value != '') {
      const res = await deleteCancelFile(route.query.id as any);
      if (res.code == 0) {
        router.push({
          path: '/administrative-penalty/administrative-penalty/case-management',
        });
      }
    } else {
      router.push({
        path: '/administrative-penalty/administrative-penalty/case-management',
      });
    }
  };

  const formRef = ref();
  const labelCol = {
    span: 6,
  };
  const wrapperCol = {
    span: 20,
  };
  const formState = reactive({
    handleWay: undefined, // 处理方式；1.不予处罚；2.行政处罚
    penaltyAmount: undefined, //罚款金额；单位：元
    delayFlag: undefined, //缴付是否延期；0.否；1.是；
    delayReason: '', //缴付延期原因
    // executeResult: undefined, //执行结果；1.强制执行；2.正常执行
    // cancelReason: '', //案件终止原因
  });

  const validatePenaltyAmount = async (_rule: Rule, value: number) => {
    if (value === undefined) {
      let message = '请输入罚款金额';
      return Promise.reject(message);
    } else {
      if (penaltyData.value?.placeInfo.partyType == 0 && value > 200) {
        return Promise.reject('罚款金额请不超过200元');
      } else if (penaltyData.value?.placeInfo.partyType == 1 && value > 3000) {
        return Promise.reject('罚款金额请不超过3000元');
      } else {
        return Promise.resolve();
      }
    }
  };

  const rules = {
    handleWay: [
      {
        required: true,
        message: '请选择处理方式',
        trigger: 'change',
      },
    ],
    penaltyAmount: [
      {
        required: true,
        validator: validatePenaltyAmount,
        trigger: 'bulr',
      },
    ],
    delayFlag: [
      {
        required: true,
        message: '请选择缴付是否延期',
        trigger: 'change',
      },
    ],
    delayReason: [
      {
        required: true,
        message: '请输入缴付延期原因',
        trigger: 'bulr',
      },
    ],
    // cancelReason: [
    //   {
    //     required: true,
    //     message: '请输入案件终止原因',
    //     trigger: 'bulr',
    //   },
    // ],
    // executeResult: [
    //   {
    //     required: true,
    //     message: '请选择执行结果',
    //     trigger: 'change',
    //   },
    // ],
  } as any;

  const penaltyData = ref([] as any);

  //立案审批记录
  const registerList = ref([] as any);

  //案件处理审批记录
  const handleList = ref([] as any);

  //延期/分期审批记录
  const delayList = ref([] as any);

  //案件终止审批记录
  const cancelList = ref([] as any);

  const changeWith = (val) => {
    if (val == '1') {
      return 'width: 100%;';
    }
  };

  // const caseHandleway = (val) => {
  //   if (val == 4) {
  //     return false;
  //   }
  // };

  const caseShow = (val, a) => {
    switch (val) {
      case 2:
        if (a == 1 || a == 2) {
          return false;
        } else {
          return true;
        }
      case 3:
        return false;
      case 4:
        return false;
      case 9:
        return false;
      default:
        return false;
    }
  };

  const caseShow2 = (val) => {
    switch (val) {
      case 2:
        return true;
      case 3:
        return false;
      case 4:
        return false;
      default:
        return false;
    }
  };

  const caseShow3 = (val, a) => {
    switch (val) {
      case 2:
        if ((a = 1)) {
          return true;
        } else {
          return false;
        }
      case 3:
        return true;
      case 4:
        return false;
      case 9:
        return false;
      default:
        return false;
    }
  };

  const caseShow4 = (val, a) => {
    switch (val) {
      case 2:
        return false;
      case 3:
        return false;
      case 4:
        if (a === '') {
          return true;
        } else {
          return false;
        }
      default:
        return false;
    }
  };

  const caseFlowNodeName = (val) => {
    switch (val) {
      case 1:
        return '主办人';
      case 2:
        return '协办人';
      case 3:
        return '承办单位';
      case 4:
        return '大队法制';
      case 5:
        return '大队长';
      case 6:
        return '立案审批节点';
      default:
        return '-';
    }
  };

  const caseNodeStatus = (val) => {
    switch (val) {
      case 1:
        // return '待审批';
        return '-';
      case 2:
        return '同意';
      case 3:
        return '不同意';
      default:
        return '-';
    }
  };

  const steps = [
    {
      title: '调查取证',
    },
    {
      title: '案件处理',
    },
    {
      title: '结案归档',
    },
  ];

  const caseStatus = (val) => {
    switch (val) {
      case 2:
        return 0;
      case 3:
        return 1;
      case 4:
        return 2;
      default:
        return 3;
    }
  };

  const columns = [
    {
      title: '节点名称',
      dataIndex: 'flowNodeName',
      hideInSearch: true,
    },
    {
      title: '审批人',
      dataIndex: 'approveName',
      hideInSearch: true,
    },
    {
      title: '审批时间',
      dataIndex: 'approveTime',
      hideInSearch: true,
    },
    {
      title: '审批结果',
      dataIndex: 'nodeStatus',
      hideInSearch: true,
      customRender: ({ record }) => caseNodeStatus(record.nodeStatus),
    },
    {
      title: '审批意见',
      dataIndex: 'approveOpinions',
      hideInSearch: true,
    },
  ];

  const loadData = async (params): Promise<API.TableListResult> => {
    const data = await caseDetail(route.query.id as any, 2);
    penaltyData.value = data;
    if (penaltyData.value.registerList) {
      registerList.value = penaltyData.value.registerList;
    }
    // console.log(registerList.value);

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: registerList.value,
          ...params,
        });
      }, 500);
    });
  };

  const loadData2 = async (params): Promise<API.TableListResult> => {
    const data = await caseDetail(route.query.id as any, 2);
    penaltyData.value = data;
    if (penaltyData.value.handleList) {
      handleList.value = penaltyData.value.handleList;
    }

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: handleList.value,
          ...params,
        });
      }, 500);
    });
  };

  const loadData3 = async (params): Promise<API.TableListResult> => {
    const data = await caseDetail(route.query.id as any, 2);
    penaltyData.value = data;
    if (penaltyData.value.delayList) {
      delayList.value = penaltyData.value.delayList;
    }

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: delayList.value,
          ...params,
        });
      }, 500);
    });
  };

  const loadData4 = async (params): Promise<API.TableListResult> => {
    const data = await caseDetail(route.query.id as any, 2);
    penaltyData.value = data;
    if (penaltyData.value.cancelList) {
      cancelList.value = penaltyData.value.cancelList;
    }

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: cancelList.value,
          ...params,
        });
      }, 500);
    });
  };

  const onSubmit = async (val) => {
    if (val == 1) {
      let data = {
        id: route.query.id,
        temporaryFlag: val,
        handleWay: formState.handleWay,
        penaltyAmount: formState.penaltyAmount,
        delayReason: formState.delayReason,
        delayFlag: formState.delayFlag,
      };
      const res = await handleCase(data);

      if (res.code == 0) {
        message.success('暂存成功！');
        tabsViewStore.closeCurrentTabToUrl(
          route,
          '/administrative-penalty/administrative-penalty/case-management',
        );
      }
    } else if (val == 0) {
      formRef.value
        .validate()
        .then(async () => {
          caseDetailApi(2);

          if (penaltyData.value?.penaltyAmount != '') {
            formState?.penaltyAmount == penaltyData.value?.penaltyAmount;
          }
          if (penaltyData.value?.delayReason != '') {
            formState.delayReason = penaltyData.value?.delayReason;
          }

          if (penaltyData.value?.delayFlag !== '') {
            formState.delayFlag = penaltyData.value?.delayFlag;
          }
          let data = {
            id: route.query.id,
            temporaryFlag: val,
            handleWay: penaltyData.value?.handleWay,
            penaltyAmount: formState?.penaltyAmount,
            delayFlag: formState.delayFlag,
            delayReason: formState.delayReason,
          };
          if (
            formState.delayFlag == 0 ||
            (penaltyData.value?.status == 4 &&
              penaltyData.value?.handleWay == 1 &&
              sdhzfileInfoData.value.fileType != '') ||
            (penaltyData.value?.status == 4 &&
              penaltyData.value?.handleWay == 2 &&
              penaltyData.value?.delayFlag == 1 &&
              sdhzfileInfoData.value.fileType != '' &&
              jnpzfileInfoData.value.fileType != '')
          ) {
            if (
              (sdhzfileInfoData.value.id == '' && penaltyData.value?.handleWay == 1) ||
              ((sdhzfileInfoData.value.id == '' || jnpzfileInfoData.value.id == '') &&
                penaltyData.value?.handleWay == 2)
            ) {
              message.warning('文书未上传!');
            } else {
              Modal.confirm({
                title: '提示',
                content: createVNode('div', { style: 'color:#666666' }, '确定结束案件？'),
                async onOk() {
                  const res = await handleCase(data);
                  if (res.code == 0) {
                    message.success('提交成功！');
                    tabsViewStore.closeCurrentTabToUrl(
                      route,
                      '/administrative-penalty/administrative-penalty/case-management',
                    );
                  }
                },
                onCancel() {},
                class: 'submitBox',
              });
            }
          } else {
            // return;
            const res = await handleCase(data);

            if (res.code == 0) {
              message.success('提交成功！');
              tabsViewStore.closeCurrentTabToUrl(
                route,
                '/administrative-penalty/administrative-penalty/case-management',
              );
            }
          }
        })
        .catch((error) => {
          console.log('error', error);
        });
    } else if (val == 2) {
      formRef.value
        .validate()
        .then(async () => {
          caseDetailApi(2);
          let params = {
            id: route.query.id,
            temporaryFlag: 0,
            handleWay: formState.handleWay,
          };
          const data = await handleCase(params);
          if (data.code == 0) {
            message.success('提交成功！');
            tabsViewStore.closeCurrentTabToUrl(
              route,
              '/administrative-penalty/administrative-penalty/case-management',
            );
          }
          // } else {
          //   message.error('文书未上传！');
          // }
        })
        .catch((error) => {
          console.log('error', error);
        });
    }
  };

  const endFlag = ref<boolean>(false);
  const showFlag = ref<boolean>(true);

  const onEnd = () => {
    // endFlag.value = true;
    // showFlag.value = false;
    // caseDetailApi(4);
    // router.push({
    //   path: '/administrative-penalty/termination',
    //   query: { id: route.query.id },
    // });
    tabsViewStore.closeCurrentTabToUrl(route, '/administrative-penalty/termination', {
      id: route.query.id,
    });
  };

  // const onEnd2 = async () => {
  //   let data = {
  //     id: route.query.id,
  //     cancelReason: formState.cancelReason,
  //   };
  //   const res = await applyCancelCase(data);

  //   if (res.code == 0) {
  //     message.success('提交审批成功！');
  //     tabsViewStore.closeCurrentTabToUrl(
  //       route,
  //       '/administrative-penalty/administrative-penalty/case-management',
  //     );
  //   }
  // };

  onMounted(() => {
    if (route.query.id) {
      caseDetailApi(2);
    }
  });
</script>
<style lang="less" scoped>
  .all {
    background-color: #ffffff;

    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }

    &-tabs {
      :global(.all-tabs.ant-tabs-top .ant-tabs-nav) {
        margin: 0 0 12px 0 !important;
      }
    }

    .archive {
      width: 100%;

      &-steps {
        width: 100%;
        border: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        padding: 24px 30%;
        background-color: #fafafa;
      }

      &-body {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;

        &-left {
          width: 30%;
          border: 1px solid #f0f0f0;
          margin-right: 12px;

          .taskBox {
            width: 100%;
            border-bottom: 1px solid #f0f0f0;

            &-top {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 14px 12px;
              background: #fafafa;
              border-bottom: 1px solid #f0f0f0;

              font-size: 14px;
              font-weight: 500;
              color: #444444;
            }
          }

          .taskBox:last-child {
            border-bottom: 0;
          }
        }

        &-right {
          width: 70%;
          border: 1px solid #f0f0f0;
          padding: 0px 18px 0 16px;
        }
      }
    }

    .penaltyInfo {
      &-body {
        &-box {
          margin-bottom: 16px;
          &-tittle {
            display: flex;
            align-items: center;
            padding: 13px 0 13px 0;
            &-left {
              border: 1px solid #0f53ac;
              margin-right: 7px;
              border-radius: 4px;
              height: 14px;
            }

            &-right {
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              color: rgba(68, 68, 68, 1);
            }
          }

          &-info {
            :global(.ant-descriptions-item-label) {
              width: 160px;
            }
          }
        }
      }
    }
    .noData {
      height: 64px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
